<template>
    <view>
        <view>
            <van-notice-bar :scrollable="true" left-icon="volume-o"  text="如果您有老会员的邀请码，请填入下面的输入框内，即可获得惊喜~"/>
        </view>
        <view class="img">
            <van-image height="500rpx" width="750rpx" :src="img" />
        </view>
        <view class="yao">
            <van-cell-group>
                <van-field :value="value" clearable="true" left-icon="star" adjust-position @clear="clear" label="邀请码" placeholder="请输入邀请码" border="false" @change="onChange"/>
            </van-cell-group>
        </view>
        <van-toast id="van-toast" />
        <button class="btn" @click="submit">确定</button>
    </view>
</template>
<script>
import Toast from '../../wxcomponents/vant/dist/toast/toast'
export default {
    data(){
        return{
            img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3604221196,216833576&fm=26&gp=0.jpg',
            value:'',
        }
    },
    methods:{
        onChange(e){
            this.value = e.detail
        },
        clear(){
            this.value = ""
        },
        submit(){
            if(this.value != "" && this.value.length == 14){
            }else if(this.value == ""){
                Toast.fail(`不能为空哦~`)
            }else if(this.value.length != 14){
                Toast.fail(`邀请码为14位哦~`)
            }
        },
    }
}
</script>
<style scoped>
.img{
    width: 100%;
    height: 500rpx;
    background-color: rgb(212, 159, 159);
}
.yao{
    width: 98%;
    margin: auto;
    margin-top: 20rpx;
    box-shadow: 0 0 10rpx #f00;
    border: 1rpx solid rgb(245, 203, 19);
}
.btn{
    width: 30%;
    background-color: rgb(201, 238, 194);
    margin: auto;
    margin-top: 20rpx;
}
</style>